.collection {
  @apply border-b;
  
  &--tools {
    @apply sticky top-[var(--headerHeight)] z-2 flex justify-between bg-pageBG border-b;
  }

  &--content {
    @apply relative z-1 overflow-hidden;
  }
  
  &--grid {
    @apply grid grid-cols-1 md:grid-cols-3 -m-1;

    &.is-empty {
      @apply grid-cols-1;
    }
  }

  &--empty {
    @apply px-16 py-64 min-h-[35vh] text-center;

    .filters-reset {
      @apply mt-32;
    }
  }

  &--pagination {
    @apply relative p-16 sm:py-32 text-center is-textured bg-pageBG border-t;
  }

  &--count {
    @apply relative p-16 sm:py-32 text-center bg-pageBG border-t;
  }

  &--filter-actions {
    @apply flex items-center px-8 sm:px-16;

    .filters-toggle {
      @apply clean-btn flex items-center relative p-16 bg-transparent text-14 leading-150 font-semibold uppercase;

      &--count {
        @apply w-24 h-24 ml-8 rounded-full bg-pageText text-pageBG text-12 leading-[2];
      }
    }

    .filters-reset {
      @apply hidden sm:block ml-8;
    }
  }

  &--filter-chips {
    @apply flex bg-pageText;

    .accordion {
      @apply border-0;

      &--inner {
        @apply max-w-none p-0 border-b border-pageText;
      }
    }
  }
}

.collection-count {
  @apply hidden relative ml-16 leading-100;
  vertical-align: super;
  font-size: .5em;

  /* Only show product counts for the mega-nav */
  .mega-nav & {
    @apply inline-block;
  }
}

.collection-sort {
  @apply flex ml-auto px-8 sm:px-16;

  .listbox {
    @apply flex;

    &--btn {
      @apply p-16 text-14 leading-150;
    }
  }

  &--title {
    @apply hidden sm:inline mr-8 font-semibold uppercase;
  }

  &--icon {
    @apply has-indicator;
  }
}

.product-card {
  @apply flex flex-col relative;

  .collection &,
  .marquee & {
    @apply p-32 m-[-0.5px] border;
  }

  &.is-inline {
    @apply my-16;
  }

  &--visuals {
    @apply relative;
  }
  
  &--photo {
    @apply relative overflow-hidden;

    .is-hover {
      @apply absolute inset-0 z-1 opacity-0 invisible transition-all;

      .product-card:hover & {
        @apply opacity-100 visible;
      }
    }
  }

  &--gallery {
    @apply relative;

    .carousel {
      &--hud {
        @apply z-3;
      }
    }
  }

  &--details {
    @apply text-center;

    .product-card--visuals + & {
      @apply mt-16;
    }
  }

  &--title {
    @apply m-0 !important;

    .is-featured & {
      @apply text-16 font-semibold;
    }

    .is-inline & {
      @apply text-24;
    }

    + .price {
      @apply mt-8;
    }
  }

  &--link {
    @apply block no-underline text-current;

    &::after {
      @apply block absolute inset-0 z-2;
      content: "";
    }
  }

  &--option {
    @apply relative z-3 mt-16;

    .option {
      @apply m-0 p-0 border-0;

      &--values {
        @apply mx-auto;
      }
    }
  }

  &--add {
    @apply absolute bottom-0 inset-x-0 z-3 text-center mx-16 mb-32 opacity-0 invisible translate-y-1/2 transition-all;
    will-change: transform;

    .product-card:hover & {
      @apply opacity-100 visible translate-y-0;
    }
  }

  .price {
    @apply flex items-center justify-center;

    &--current {
      @apply sm:text-16 sm:leading-150 font-semibold;
    }

    &--discount {
      @apply ml-8 px-6 py-4 rounded-md bg-pageText text-pageBG text-10 leading-125 tracking-widest font-semibold uppercase;
    }
  }
}

.product-featured {
  @apply flex flex-col relative;

  h2 {
    @apply mt-4 text-center text-16 font-semibold transition-opacity duration-200;

    .product-featured:hover & {
        @apply opacity-100 visible;
      }
  }

  &:hover {
    h2 {
      @apply opacity-40;
    }
  }
}